import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './index.css';

export default class Footer extends Component {

  // 全选
  check = (e) => {
    console.log(e.target.checked);
    this.props.checkAll(e.target.checked)
  }

  // 删除已完成
  delComplete = () => {
    this.props.delListComplete()
  }

  // 设置 prop 的数据类型
  static propTypes = {
    checkAll: PropTypes.func.isRequired
  }

  render() {
 const {list} = this.props
 const listAll = list.length
  // 计算已完成的数量并返回
 const complete = list.reduce((old, item) => old + (item.done ? 1 : 0), 0)

    return (
      <div className="todo-footer">
        <label>
          <input type="checkbox" checked={listAll === complete && complete !== 0 ? true : false} onChange={ this.check }/>
        </label>
        <span>
          <span>已完成{ complete }</span> / 全部{ listAll }
        </span>
        <button className="btn btn-danger" onClick={ this.delComplete }>清除已完成任务</button>
      </div>
    );
  }
}
